<template>
	<vp-main-page @refresh="loadDataList">
		<template #search>
			<el-form label-suffix=":" ref="searchFormRef" :model="searchForm" @submit.prevent
				@keyup.enter="loadDataList" label-width="120px">
				<vp-search-row :show-more="showMore">
					<vp-search-col>
						<el-form-item prop="dateList">
							<template #label><vp-label zh="合同日期" en="" /></template>
							<el-date-picker v-model="searchForm.dateList" type="daterange"
								start-placeholder="开始日期/Start Date" end-placeholder="结束日期/End Date"
								value-format="YYYY-MM-DD" unlink-panels range-separator="-" style="width: 100%">
							</el-date-picker>
						</el-form-item>
					</vp-search-col>
					<vp-search-col>
						<el-form-item prop="bh">
							<template #label><vp-label zh="合同号" en="" /></template>
							<el-input v-model="searchForm.bh" v-trim placeholder="" clearable></el-input>
						</el-form-item>
					</vp-search-col>
					<vp-search-col>
						<el-form-item prop="xgfms">
							<template #label><vp-label zh="供应商/相关方" en="" /></template>
							<el-input v-model="searchForm.xgfms" v-trim placeholder="" clearable></el-input>
						</el-form-item>
					</vp-search-col>
					<vp-search-col>
						<el-form-item prop="jh">
							<template #label><vp-label zh="件号/产品名" en="" /></template>
							<el-input v-model="searchForm.jh" v-trim placeholder="" clearable></el-input>
						</el-form-item>
					</vp-search-col>
					<vp-search-col>
						<el-form-item prop="mc">
							<template #label><vp-label zh="名称" en="" /></template>
							<el-input v-model="searchForm.mc" v-trim placeholder="" clearable></el-input>
						</el-form-item>
					</vp-search-col>
					<vp-search-col>
						<el-form-item prop="xlh">
							<template #label><vp-label zh="序列号" en="" /></template>
							<el-input v-model="searchForm.xlh" v-trim placeholder="" clearable></el-input>
						</el-form-item>
					</vp-search-col>
					<vp-search-col>
						<el-form-item prop="lx">
							<template #label><vp-label zh="合同类型" en="" /></template>
							<el-select class="w100" v-model="searchForm.lx" clearable>
								<el-option :value="10" label="采购/"></el-option>
								<el-option :value="20" label="送修/"></el-option>
								<el-option :value="30" label="借入/"></el-option>
								<el-option :value="40" label="借出/"></el-option>
								<el-option :value="50" label="交换/"></el-option>
								<el-option :value="70" label="出租/"></el-option>
								<el-option :value="80" label="销售/"></el-option>
								<el-option :value="90" label="索赔/"></el-option>
								<el-option :value="999" label="其他/"></el-option>
							</el-select>
						</el-form-item>
					</vp-search-col>
					<vp-search-col>
						<el-form-item prop="xqmxBh">
							<template #label><vp-label zh="需求单号" en="" /></template>
							<el-input v-model="searchForm.xqmxBh" v-trim placeholder="" clearable></el-input>
						</el-form-item>
					</vp-search-col>
					<vp-search-col>
						<el-form-item prop="wllx">
							<template #label><vp-label zh="物料类型" en="Material Cat." /></template>
							<el-select v-model="searchForm.wllx" placeholder="请选择" clearable>
								<el-option label="航材" :value="10"><vp-label zh="航材"
										en="Aircraft Material"></vp-label></el-option>
								<el-option label="化工品" :value="20"><vp-label zh="化工品"
										en="Chemical"></vp-label></el-option>
								<el-option label="工具" :value="30"><vp-label zh="工具" en="Tool"></vp-label></el-option>
							</el-select>
						</el-form-item>
					</vp-search-col>

					<vp-search-col btn-col>
						<vp-btn-search :loading="loading" @click="loadDataList" />
						<vp-btn-reset @click="handleSearchReset" />
						<vp-btn-more @change="showMore = $event" />
					</vp-search-col>
				</vp-search-row>
			</el-form>
		</template>
		<template #table>
			<vp-vxe-table id="baseDataModel" ref="tableRef" :data="tableData" row-key="id" v-loading="loading">
				<vxe-column type="seq" align="center" title="#" width="50" />
				<vxe-column field="htrq" show-overflow width="120">
					<template #header><vp-label zh="日期" en="" /></template>
				</vxe-column>
				<vxe-column field="bh" show-overflow width="130">
					<template #header><vp-label zh="合同号" en="" /></template>
				</vxe-column>
				<vxe-column field="lx" show-overflow width="100">
					<template #header><vp-label zh="合同类型" en="" /></template>
					<template #default="scope">
						<vp-label v-if="scope.row.lx == 20" zh="设备" en="" />
						<vp-label v-if="scope.row.lx == 10" zh="采购" en="" />
						<vp-label v-if="scope.row.lx == 20" zh="送修" en="" />
						<vp-label v-if="scope.row.lx == 30" zh="借入" en="" />
						<vp-label v-if="scope.row.lx == 40" zh="借出" en="" />
						<vp-label v-if="scope.row.lx == 50" zh="交换" en="" />
						<vp-label v-if="scope.row.lx == 70" zh="出租" en="" />
						<vp-label v-if="scope.row.lx == 80" zh="销售" en="" />
						<vp-label v-if="scope.row.lx == 90" zh="索赔" en="" />
						<vp-label v-if="scope.row.lx == 999" zh="其他" en="" />
					</template>
				</vxe-column>
				<vxe-column field="wllx" show-overflow width="100">
					<template #header><vp-label zh="物料类型" en="Material Cat." /></template>
					<template #default="scope">
						<vp-label v-if="scope.row.wllx == 10" zh="航材" en="Aircraft Material" />
						<vp-label v-else-if="scope.row.wllx == 20" zh="化工品" en="Chemical" />
						<vp-label v-else-if="scope.row.wllx == 30" zh="工具" en="Tool" />
					</template>
				</vxe-column>
				<vxe-column field="jh" show-overflow width="80">
					<template #header><vp-label zh="件号" en="" /></template>
				</vxe-column>
				<vxe-column field="zwms" show-overflow width="140">
					<template #header><vp-label zh="名称" en="Name" /></template>
					<template #default="{ row }">
						中:{{ row.zwms }} 英:{{ row.ywms }}
					</template>
				</vxe-column>
				<vxe-column field="xlh" show-overflow width="100">
					<template #header><vp-label zh="序列号" en="" /></template>
				</vxe-column>
				<vxe-column field="xqmxBh" show-overflow width="100">
					<template #header><vp-label zh="关联需求" en="" /></template>
					<template #default="{ row }">
						{{ row.xqmxBh }} #{{ row.xqmxXc }}
					</template>
				</vxe-column>


				<vxe-column field="" show-overflow width="120">
					<template #header><vp-label zh="合同数量" en="" /></template>
				</vxe-column>
				<vxe-column field="" show-overflow width="120">
					<template #header><vp-label zh="入库数量" en="" /></template>
				</vxe-column>
				<vxe-column field="" show-overflow width="120">
					<template #header><vp-label zh="出库数量" en="" /></template>
				</vxe-column>
				<vxe-column field="bz" show-overflow width="120">
					<template #header><vp-label zh="需求说明" en="" /></template>
				</vxe-column>
				<vxe-column field="jhrq" show-overflow width="120">
					<template #header><vp-label zh="交货日期" en="" /></template>
				</vxe-column>
				<vxe-column field="cqBh" show-overflow width="120">
					<template #header><vp-label zh="产权" en="" /></template>
					<template #default="{ row }">
						{{ row.cqBh }} {{ row.cqName }}
					</template>
				</vxe-column>
				<vxe-column field="xgfms" show-overflow width="120">
					<template #header><vp-label zh="供应商" en="" /></template>
				</vxe-column>
			</vp-vxe-table>
		</template>
		<template #pagination>
			<vp-pagination @change="loadDataList" :total="page.total" v-model:currentPage="page.pageNum"
				v-model:pageSize="page.pageSize">
			</vp-pagination>
		</template>
	</vp-main-page>
</template>
<script setup lang="ts" name="list">
import { onMounted, reactive, ref } from 'vue'
import request from '/@/utils/request';
import { DEFAULT_PAGE } from '/@/utils/page';

import { useRouter } from 'vue-router';
const router = useRouter();


const searchForm = reactive({
	dateList: [],
	ztList: [20, 98, 99] as number[],
	bh: "",
	lx: "",
	mc: "",
	jh: "",
	xgfms: "",

	xlh:"",
	xqmxBh:"",
	wllx: null,
});

const page = reactive({
	...DEFAULT_PAGE,
})

const showMore = ref(false);
const loading = ref(false);
const tableData = ref([]);

// 加载列表数据
const loadDataList = () => {
	loading.value = true
	request.get('/material/contract/listDetail', {
		params: {
			...searchForm,
			...page
		}
	}).then(res => {
		tableData.value = res?.data?.list || []
		page.total = res?.data?.total || 0
		page.pageNum = res?.data?.pageNum || 1;
	}).finally(() => {
		loading.value = false;
	})
}

const searchFormRef = ref();
// 重置搜索条件
const handleSearchReset = () => {
	searchForm.dateList = [];
	searchForm.ztList = [20, 98, 99];
	searchForm.jh = "";
	searchForm.bh = "";
	searchForm.lx = "";
	searchForm.mc = "";
	searchForm.jh = "";
	searchForm.xgfms = "";
	searchFormRef.value.resetFields();
	loadDataList();
}

onMounted(() => {
	loadDataList();
})

const tableRef = ref();

const handleFormSubmited = () => {
	loadDataList();
}


</script>
